<template>
    <div class="app-table">
        <div class="container">
            <div class="labelBox flex">
                <div :class="{ 'label': active !== 0, 'label_active': active === 0 }"
                    @click="active = 0, currentView = 'addLabelInformView'">标签信息</div>
                <div :class="{ 'label': active !== 1, 'label_active': active === 1 }"
                    @click="active = 1, currentView = 'addStudentLabelView'">学生标签</div>
            </div>

            <div class="transitionBox">
                <Transition name="fade">
                    <component :is="currentView" :key="currentView" :ref="currentView"></component>
                </Transition>
            </div>
        </div>
    </div>
</template>
<script>
import addLabelInformView from "@/components/payment/addLabelInformView.vue";
import addStudentLabelView from "@/components/payment/addStudentLabelView.vue";
import { httpService } from "@/utils/httpService";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";

export default {
    components: { addLabelInformView, ElConfigProvider, addStudentLabelView },
    data() {
        return {
            active: 0,
            currentView: "addLabelInformView",

            page: 1,
            pageSize: 10,
            total: 0,
            form: {
                className: "",
                studentName: "",
                studentNumber: "",
            },
        };
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() { },
    methods: {
        onSubmit() {
            console.log(this.form);
            // this.getPaymentRefundList();
        },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                // this.getPaymentRefundList();
            }
        },
        changePageSize(size) {
            // this.getStudentPayList();
        },
        changeCurrentPage(page) {
            this.page = page;
            // this.getStudentPayList();
        },

    },
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.app-table {
    background: #eff3f5;
    padding: 5px 10px 0px;
}

.container {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 145px);
}

.labelBox {
    width: 270px;
    height: 44px;
    border: 1px solid #E5E5EF;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 14px;
    overflow: hidden;
    cursor: pointer;
}

.label {
    width: 135px;
    line-height: 44px;
    text-align: center;
    color: #000000;
}

.label_active {
    width: 135px;
    line-height: 44px;
    text-align: center;
    background-color: #007EFF;
    color: #fff;
    border-radius: 10px;
}


/* .fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
} */
</style>